<!--
 * @Description:scrooll家族
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-20 17:52:42
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>scrooll家族</title>
	<style>
		* {
			margin: 0;
			padding: 0
		}

	  body{
			height: 3000px;
		}
	</style>
	<script>
		window.onscroll = function () {
		console.log( pageXOffset)
		console.log( pageYOffset)
		console.log("----")
     document.title=pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0
		// pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

		}
	</script>
</head>

<body>
	<div>
		 document.body.scrollTop||document.documentElement.scrollTop <br>
		document.title=window.pageYOffset
	</div>
	
			<div class=" ti flex1"></div>
	<div class="ti flex2"></div>
	<div class="ti flex3"></div>
	<style>
		.ti {
			width: 350px;
			height: 220px;
			border: 1px solid #000;
		}
	
		.flex1 {
			background: -webkit-linear-gradient(right, #BEB9F9, #66DEBA);
			background: -o-linear-gradient(right, #BEB9F9, #66DEBA);
			background: -moz-linear-gradient(right, #BEB9F9, #66DEBA);
			background: -mos-linear-gradient(right, #BEB9F9, #66DEBA);
			background: linear-gradient(right, #BEB9F9, #66DEBA);
		}
	
		.flex2 {
			background: -webkit-linear-gradient(right, #BEB9F9, #FECF4B);
			background: -o-linear-gradient(right, #BEB9F9, #FECF4B);
			background: -moz-linear-gradient(right, #BEB9F9, #FECF4B);
			background: -mos-linear-gradient(right, #BEB9F9, #FECF4B);
			background: linear-gradient(right, #BEB9F9, #FECF4B);
		}
	
		.flex3 {
			background: -webkit-linear-gradient(right, #BEB9F9, #FCA4B6);
			background: -o-linear-gradient(right, #BEB9F9, #FCA4B6);
			background: -moz-linear-gradient(right, #BEB9F9, #FCA4B6);
			background: -mos-linear-gradient(right, #BEB9F9, #FCA4B6);
			background: linear-gradient(right, #BEB9F9, #FCA4B6);
		}
	</style>
		
		
		
		
	<div class="box" id="box">

	</div>
</body>

</html>